<template>
  <div class="recruit_box">
    <el-form :inline="true" :model="query" class="demo-form-inline">

      <el-form-item label="部门岗位">
        <el-cascader v-model="value" :options="options" @change="change">
        </el-cascader>
      </el-form-item>

      <el-form-item label="审批人">
        <el-select v-model="query.userId" placeholder="请选择">
          <el-option
              v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围">
        <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="——"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="工资范围">
        <el-input v-model="query.minSalary" placeholder="最小工资"></el-input>
      </el-form-item>
      <el-form-item label="工资范围">
        <el-input v-model="query.maxSalary" placeholder="最大工资"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="queryRecruit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveRecruit">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="pageRecruit.records" stripe style="width: 100%">

      <el-table-column  type="index" label="编号" width="80"></el-table-column>
      <el-table-column prop="deptName" label="部门" width="150"></el-table-column>
      <el-table-column prop="position" label="岗位" width="150"></el-table-column>
      <el-table-column prop="salaryRange" label="工资范围" width="150"></el-table-column>
      <el-table-column prop="numPeople" label="招聘人数" width="150"></el-table-column>
      <el-table-column prop="conditions" label="招聘条件" width="150"></el-table-column>
      <el-table-column prop="jobContent" label="招聘内容" width="150"></el-table-column>
      <el-table-column prop="userName" label="审核人" width="150"></el-table-column>
      <el-table-column prop="startTime" label="起招时间" width="200"></el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="200"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editRecruit(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteRecruit(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination background layout="prev, pager, next"
                   :total="pageRecruit.total"
                   :current-page="current" :page-size="pageRecruit.size" @current-change="currentPage"
    ></el-pagination>


    <el-dialog title="添加招聘计划" :visible.sync="flagRecruit" width="600px" :show-close=false>

      <el-form :model="addRecruit">

        <el-form-item label="招聘岗位" label-width="120px">
          <el-cascader v-model="value1" :options="options" @change="changeDialog"></el-cascader>
        </el-form-item>

        <el-form-item label="岗位数量" label-width="120px">
          <el-input-number v-model="addRecruit.numPeople" :min="1" :max="100"></el-input-number>
        </el-form-item>

        <el-form-item label="招聘内容" label-width="120px">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addRecruit.jobContent" ></el-input>
        </el-form-item>

        <el-form-item label="工资范围" label-width="120px">
          <el-input-number v-model="addRecruit.minSalary" :min="3000" :max="50000"></el-input-number>
          <el-input-number v-model="addRecruit.maxSalary" :min="5000" :max="50000"></el-input-number>
        </el-form-item>

        <el-form-item label="招聘条件" label-width="120px">
          <el-input type="textarea" :rows="3" placeholder="请输入招聘条件" v-model="addRecruit.conditions"></el-input>
        </el-form-item>

        <el-form-item label="期限" label-width="120px">
          <el-date-picker v-model="addRecruit.startTime" type="date" placeholder="开始时间">
          </el-date-picker>
          <el-date-picker v-model="addRecruit.endTime" type="date" placeholder="结束时间">
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogAddRecruit">取 消</el-button>
        <el-button type="primary" @click="createDialogAddRecruit">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="编辑招聘计划" :visible.sync="editFlag" width="600px" :show-close=false>
      <el-form :model="editRecruits">

        <el-form-item label="所属部门" label-width="120px">
          <el-input v-model="editRecruits.deptName" autocomplete="off" style="width:150px" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="所属岗位" label-width="120px">
          <el-input v-model="editRecruits.position" autocomplete="off" style="width:150px" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="招聘内容" label-width="120px">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="editRecruits.jobContent" ></el-input>
        </el-form-item>

        <el-form-item label="工资范围" label-width="120px">
          <el-input-number v-model="editRecruits.minSalary" :min="3000" :max="50000"></el-input-number>
          <el-input-number v-model="editRecruits.maxSalary" :min="5000" :max="50000"></el-input-number>
        </el-form-item>

        <el-form-item label="招聘条件" label-width="120px">
          <el-input type="textarea" :rows="3" placeholder="请输入招聘条件" v-model="editRecruits.conditions"></el-input>
        </el-form-item>

        <el-form-item label="期限" label-width="120px">
          <el-date-picker v-model="editRecruits.startTime" type="date" placeholder="开始时间">
          </el-date-picker>
          <el-date-picker v-model="editRecruits.endTime" type="date" placeholder="结束时间">
          </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noEditFlagDialog">取 消</el-button>
        <el-button type="primary" @click="editFlagDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {treeOrganization} from '@/api/core/dept/dept'
import {saveRecruit, pageRecruit, delRecruit, getRecruitById, updateRecruit} from '@/api/core/job/recruit'
import {getUser} from "@/api/auth/login";


export default {
  data(){
    return{
      current:1,
      users:[],
      date:[],
      pageRecruit:{},
      query: {},
      value:[],
      options: [],
      value1:[],
      flagRecruit:false,
      addRecruit:{
        numPeople:1,
        minSalary:3000,
        maxSalary:5000,
        token:this.$cookies.get("token")
      },
      editRecruits:{},
      editFlag:false
    }
  },
  created() {
    this.queryRecruit()
  },
  methods:{

    async editFlagDialog(){
      const {data:res} = await updateRecruit(this.editRecruits)
      console.log(res)
      this.editRecruits = {}
      this.queryRecruit()
      this.editFlag = false
    },
    noEditFlagDialog(){
      this.editFlag = false
      this.editRecruits = {}
    },
    //招聘计划
    async treeDeptPosition(){
      const {data:res} = await treeOrganization()
      this.options = res.data.tree
    },
    change(v){
      this.query.deptId = v[0]
      this.query.postId = v[v.length-1]
    },
    changeDialog(v){
      this.addRecruit.deptId = v[0]
      this.addRecruit.postId = v[v.length-1]
    },
    async editRecruit(id){
      const {data:res} = await getRecruitById(id)
      this.editRecruits = res.data.recruit
      this.editRecruits.id
      console.log(res)
      this.editFlag = true
    },
    deleteRecruit(id){
      this.$confirm('此操作将永久删除招聘简章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRecruit(id).then(res => {
          if (res.data.code === 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryRecruit()
          }else {
            this.$message.error(res.data.message);
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async getUsers(){
      const {data:res} = await getUser()
      this.users = res.data.list
    },
    saveRecruit(){
      this.flagRecruit = true
    },
    setRecruit(){
      this.addRecruit = {}
      this.addRecruit.numPeople=1
      this.addRecruit.minSalary=3000
      this.addRecruit.maxSalary=5000
      this.addRecruit.token = this.$cookies.get("token")
      this.value1 = []
      this.flagRecruit = false
    },

    async createDialogAddRecruit(){
      const {data:res} = await saveRecruit(this.addRecruit)
      this.setRecruit()
      await this.getRecruitList()
    },
    cancelDialogAddRecruit(){
      this.setRecruit()
    },
    queryRecruit(){
      this.query.startTime = this.date[0]
      this.query.endTime = this.date[1]
      this.getRecruitList()
      this.value = []
      this.query = {}
      this.date = []
      this.treeDeptPosition()
      this.getUsers()
    },
    async getRecruitList(){
      const {data:res} = await pageRecruit(this.current,10,this.query)
      this.pageRecruit = res.data.page
    },
    async currentPage(e){
      const {data:res} = await pageRecruit(e,10,this.query)
      this.pageRecruit = res.data.page
    }
  }

}
</script>

<style scoped>
.el-pagination{
  padding-top:30px;
  padding-left: 700px;
}
.recruit_box{
  margin:50px 50px;
}


</style>
